<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
        }

        #l-map {
            height: 300px;
            width: 100%;
        }

        #r-result {
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=IYrcBQaaLVKXdIFjrMCAs7mOm3RcmrEI"></script>
    <title>关键字输入提示词条</title>
</head>
<body>
<jsp:include page="/WEB-INF/jsp/include/header2.jsp"/>
<form>
    <select name="cityName">
        <c:forEach var="cityName" items="${cityNames}">
            <option value="${cityName}" <c:if test="${cityName eq param.cityName}">selected="selected"</c:if>>
                    ${cityName}
            </option>
        </c:forEach>
    </select>
    <select name="dateStr">
        <c:forEach var="dateStr" items="${dates}">
            <option value="${dateStr}" <c:if test="${dateStr eq param.dateStr}">selected="selected"</c:if>>
                    ${dateStr}
            </option>
        </c:forEach>
    </select>
    <input type="submit">
</form>
<div id="l-map"></div>
<div id="r-result">
    原始地址：
    <div id="address"></div>
    请输入:<input type="text" id="suggestId" size="50" value="上海" style="width:150px;"/>

    <button id="statusBtn" onclick="nextAddress()">下一条</button>

</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:500px;height:auto; margin-left: 300px"></div>
<table border="1">
    <tr>
        <td>上海</td>
        <td>241</td>
        <td>43</td>
    </tr>
    <tr>
        <td>东莞</td>
        <td>44</td>
        <td>13</td>
    </tr>
    <tr>
        <td>佛山</td>
        <td>7</td>
        <td>1</td>
    </tr>
    <tr>
        <td>北京</td>
        <td>91</td>
        <td>16</td>
    </tr>
    <tr>
        <td>南京</td>
        <td>55</td>
        <td>10</td>
    </tr>
    <tr>
        <td>南宁</td>
        <td>24</td>
        <td>7</td>
    </tr>
    <tr>
        <td>合肥</td>
        <td>28</td>
        <td>6</td>
    </tr>
    <tr>
        <td>天津</td>
        <td>40</td>
        <td>9</td>
    </tr>
    <tr>
        <td>宁波</td>
        <td>13</td>
        <td>6</td>
    </tr>
    <tr>
        <td>广州</td>
        <td>37</td>
        <td>8</td>
    </tr>
    <tr>
        <td>成都</td>
        <td>83</td>
        <td>24</td>
    </tr>
    <tr>
        <td>杭州</td>
        <td>29</td>
        <td>10</td>
    </tr>
    <tr>
        <td>武汉</td>
        <td>50</td>
        <td>12</td>
    </tr>
    <tr>
        <td>深圳</td>
        <td>54</td>
        <td>11</td>
    </tr>
    <tr>
        <td>苏州</td>
        <td>52</td>
        <td>12</td>
    </tr>
    <tr>
        <td>西安</td>
        <td>32</td>
        <td>7</td>
    </tr>
    <tr>
        <td>郑州</td>
        <td>23</td>
        <td>7</td>
    </tr>
    <tr>
        <td>重庆</td>
        <td>43</td>
        <td>12</td>
    </tr>
    <tr>
        <td>长沙</td>
        <td>21</td>
        <td>5</td>
    </tr>
    <tr>
        <td>青岛</td>
        <td>42</td>
        <td>8</td>
    </tr>
</table>
</body>
</html>

<script type="text/javascript">
    //    var data = [
    //        {"auctionId": 123, "cityName": "上海", "areaName": "", "address": "周浦东-地铁站"},
    //        {"auctionId": 456, "cityName": "上海", "areaName": "浦东新区", "address": "周浦东-地铁站", "handFix": 1},
    //        {"auctionId": 789, "cityName": "上海", "areaName": "静安区", "address": "智慧广场"}
    //    ];
    var data =${data};
    var index = 0;

    function nextAddress() {
        $("#statusBtn").text("下一条,当前条数：" + index);

        var curData = data[index];
        while (curData["handFix"] === 1) {
            index++;
            curData = data[index]
        }
        $("#address").text(curData["address"])
        $("#suggestId").val(curData["cityName"] + curData["areaName"] + curData["address"])
    }

    $(function () {


    })
</script>
<script type="text/javascript">
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map");
    map.enableScrollWheelZoom(true);
    map.centerAndZoom("上海", 12);                   // 初始化地图,设置城市和地图级别。

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input": "suggestId"
            , "location": map
        });

    ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
        console.info(e)
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        var str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

    function setPlace() {
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun() {
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 16);
            map.addOverlay(new BMap.Marker(pp));    //添加标注

            var cd = data[index]
            $.post("/real/fix_address", {
                "auctionId": cd["auctionId"],
                "lng": pp.lng,
                "lat": pp.lat
            }, function (a) {
                console.info(a)
            })

            index++;
            G("searchResultPanel").innerHTML += "<br>" + pp.lng + "," + pp.lat;
            G("searchResultPanel").innerHTML += "<br>当天index" + index + "  all:" + data.length;
        }

        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

</script>
